<template>
  <div class="basic-setting-content pl16 pr16">
    <div class="common-form">{{ $t('setting.member_settings') }}</div>
    <el-form-item :label="$t('setting.default_nickname')" :rules="[{ required: true, message: ' ' }]" prop="userName">
      <el-input v-model.trim="form.userName" :placeholder="$t('setting.default_nickname')" class="max-w460"></el-input>
      <div class="tips">{{ $t('setting.default_nickname_tip') }}</div>
    </el-form-item>
    <el-form-item :label="$t('setting.default_avatar')"
      :rules="[{ required: true, message: $t('setting.select_default_avatar') }]">
      <div class="ww100">
        <el-button @click="chooseImg('avatarUrl')">{{ $t('setting.select_image') }}</el-button>
      </div>
      <img class="mt10" v-img-url="form.avatarUrl" :width="100" />
      <div class="gray9">{{ $t('setting.default_avatar_tip') }}</div>
    </el-form-item>
    <div class="common-form">{{ $t('setting.miniapp_settings') }}</div>
    <el-form-item :label="$t('setting.login_title')" :rules="[{ required: true, message: ' ' }]" prop="name">
      <el-input v-model.trim="form.name" placeholder="" class="max-w460"></el-input>
    </el-form-item>
    <el-form-item :label="$t('setting.login_logo')" :rules="[{ required: true, message: ' ' }]" prop="loginLogo">
      <div class="ww100">
        <el-button @click="chooseImg('loginLogo')">{{ $t('setting.select_image') }}</el-button>
      </div>
      <div class="d-c">
        <img class="mt10" v-img-url="form.loginLogo" :width="100" />
        <div class="gray">{{ $t('setting.login_logo_tip') }}</div>
      </div>
    </el-form-item>
    <el-form-item :label="$t('page.auth_description_zh')" :rules="[{ required: true, message: ' ' }]"
      prop="loginDesc">
      <el-input v-model.trim="form.loginDesc" :placeholder="$t('setting.auth_login_description')"
        class="max-w460"></el-input>
    </el-form-item>
     <el-form-item :label="$t('page.auth_description_hk')" :rules="[{ required: true, message: ' ' }]"
      prop="loginDesc">
      <el-input v-model.trim="form.loginDescHk" :placeholder="$t('setting.auth_login_description')"
        class="max-w460"></el-input>
    </el-form-item>
     <el-form-item :label="$t('page.auth_description_en')" :rules="[{ required: true, message: ' ' }]"
      prop="loginDesc">
      <el-input v-model.trim="form.loginDescEn" :placeholder="$t('setting.auth_login_description')"
        class="max-w460"></el-input>
      <div class="tips">{{ $t('setting.miniapp_auth_description') }}</div>
    </el-form-item>
    <el-form-item :label="$t('setting.miniapp_delivery')" prop="isSendWx">
      <el-checkbox v-model="form.isSendWx">{{ $t('setting.deliver_to_miniapp') }}</el-checkbox>
      <div class="tips">{{ $t('setting.auto_miniapp_delivery') }}</div>
    </el-form-item>
    <el-form-item :label="$t('setting.enable_wechat_auth')" prop="wxOpen">
      <el-checkbox v-model="form.wxOpen">{{ $t('setting.wechat_auth_enabled') }}</el-checkbox>
      <div class="tips">{{ $t('setting.miniapp_login_wechat_auth') }}</div>
    </el-form-item>
    <el-form-item :label="$t('setting.enable_phone_auth')" prop="wxPhone">
      <el-checkbox v-model.trim="form.wxPhone">{{ $t('setting.phone_auth_enabled') }}</el-checkbox>
      <div class="tips">{{ $t('setting.miniapp_login_phone_auth') }}</div>
    </el-form-item>
    <el-form-item :label="$t('setting.show_merchant_info')">
      <el-radio-group v-model="form.storeOpen">
        <el-radio :label="1">{{ $t('setting.show') }}</el-radio>
        <el-radio :label="0">{{ $t('setting.turn_off') }}</el-radio>
      </el-radio-group>
      <div class="tips">{{ $t('setting.wx_audit_hide_tip') }}</div>
    </el-form-item>
    <div class="common-form">{{ $t('setting.h5_mp_settings') }}</div>
    <el-form-item :label="$t('setting.enable_sms_verification')" prop="h5SmsOpen">
      <el-checkbox v-model="form.h5SmsOpen">{{ $t('setting.enable_sms_verification_h5') }}</el-checkbox>
      <div class="tips">{{ $t('setting.h5_register_sms_tip') }}</div>
    </el-form-item>
    <el-form-item :label="$t('setting.enable_phone_binding')" prop="mpBinding">
      <el-checkbox v-model="form.mpBinding">{{ $t('setting.phone_binding_enabled') }}</el-checkbox>
      <div class="tips">{{ $t('setting.mp_phone_binding_tip') }}</div>
    </el-form-item>
    <!-- <el-form-item label="是否开启微信授权" prop="mp_open">
      <el-checkbox v-model="form.mpOpen">开启微信授权</el-checkbox>
      <div class="tips">公众号用户登录是否开启微信授权</div>
    </el-form-item> -->
    <!--上传图片-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" :config="{ total: 1 }" @returnImgs="returnImgsFunc">
    </Upload>
  </div>
</template>

<script>
import Upload from "@/components/file/Upload.vue";
export default {
  components: {
    Upload
  },
  data() {
    return {
      /*是否打开图片选择*/
      isupload: false,
      type: ""
    };
  },
  inject: ["form"],
  created() { },
  methods: {
    /*选择图片*/
    chooseImg(e) {
      this.type = e;
      this.isupload = true;
    },
    /*关闭选择图片*/
    returnImgsFunc(e) {
      this.isupload = false;
      if (e != null && e.length > 0) {
        if (this.type == "avatarUrl") {
          this.form.avatarUrl = e[0].filePath;
        } else if (this.type == "loginLogo") {
          this.form.loginLogo = e[0].filePath;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.addCustom_content {
  margin-top: 20px;

  .custom_box {
    margin-bottom: 10px;
  }
}

.addCustomBox {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--prev-color-primary);

  .btn {
    cursor: pointer;
    width: max-content;
    background-color: rgba(64, 149, 229, 1);
    color: rgba(255, 255, 255, 1);
  }
}

.titTip {
  display: inline-bolck;
  font-size: 12px;
  line-height: 24px;
  font-weight: 400;
  color: #999999;
}

.addfont {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #4095e5;
  margin-left: 14px;
  cursor: pointer;
}
</style>
